<template>
  <view class="info">
    <topTitle :title="$t('info.personalCenter')" />
    <view class="tab">
      <view class="arrow">
        <view>{{ $t('info.avatar') }}</view>
        <view @tap="uploadShow = true">
          <up-avatar mode="aspectFill" :src="info.picture" size="50"></up-avatar>
        </view>
      </view>
      <view class="arrow" @click="nickNameShow = true; nick_name = info.nick_name">
        <view>{{ $t('info.nickname') }}</view>
        <view>{{ info.nick_name }}</view>
      </view>
      <view class="copy" @tap="copyText(info.user_name)">
        <view>{{ $t('info.account') }}</view>
        <view>{{ info.user_name }} <i></i></view>
      </view>
      <view class="copy" @tap="copyText(info.id_no)">
        <view>{{ $t('info.invitationCode') }}</view>
        <view>{{ info.id_no }}</view>
      </view>
    </view>
    <view class="tab">
      <view class="arrow">
        <view>{{ $t('info.rulesAgreement') }}</view>
      </view>
      <view class="arrow">
        <view>{{ $t('info.aboutUs') }}</view>
      </view>
      <view>
        <view>{{ $t('info.version') }}</view>
        <view>V{{ version_number }}</view>
      </view>
    </view>
    <view class="btn">
      <up-button @tap="LogonFn" :text="$t('info.logout')" type="primary"></up-button>
    </view>

    <up-action-sheet
      round="10"
      :actions="itemList"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      :show="uploadShow"
      @close="uploadShow = false"
      :cancelText="$t('info.cancel')"
      @select="selectFn"
    ></up-action-sheet>
    <up-modal
      :show="nickNameShow"
      :confirmText="$t('info.confirm')"
      :cancelText="$t('info.cancel')"
      :title="$t('info.modifyNickname')"
      :showCancelButton="true"
      @cancel="nickNameShow = false"
      @confirm="confirm"
    >
      <up-input :placeholder="$t('info.enterNickname')" border="surround" focus v-model="nick_name"></up-input>
    </up-modal>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, reactive } from "vue";
import { UserInfo, UserInfoUpdate, LogOut } from "@/api/UserApi";
import { UploadToken } from "@/api/SystemApi";
const instance = getCurrentInstance()?.appContext.config.globalProperties;

let version_number = ref();
// 获取当前app的版本
const systemInfo = uni.getSystemInfoSync();
// #ifdef H5
version_number.value = systemInfo.appVersion;
// #endif
// #ifdef APP
version_number.value = systemInfo.appWgtVersion;
// #endif

// 获取用户信息
let info = ref<any>();
const UserInfoFn = async () => {
  info.value = uni.getStorageSync("userInfo");
  info.value = await UserInfo();
};
UserInfoFn();

const itemList = ref([
  {
    name: instance?.$t('info.selectFromAlbum'),
    sourceType: "album",
  },
  {
    name: instance?.$t('info.takePhoto'),
    sourceType: "camera",
  },
]);
let uploadShow = ref<boolean>(false);
let nickNameShow = ref<boolean>(false);
let idNoShow = ref<boolean>(false);
const selectFn = (e: any) => {
  console.log(e);
  uploadImage(e.sourceType);
};
// 上传头像
const uploadImage = async (type: string) => {
  let obj = await UploadToken(1, 1, type);
  info.value = { ...info.value, picture: obj.downloadurl };
  UserInfoUpdate({ picture: obj.objectName });
};

// 更改用户名称
let nick_name = ref<string>();
let id_no = ref<string>();
const confirm = async (e: any) => {
  if (nickNameShow.value) {
    await UserInfoUpdate({ nick_name: nick_name.value });
    nickNameShow.value = false;
    info.value.nick_name = nick_name.value;
  }
  if (idNoShow.value) {
    const regex = /^[A-Za-z0-9]{6,8}$/;
    if (!id_no.value || !regex.test(id_no.value)) {
      uni.showToast({
        title: instance?.$t('info.idFormatError'),
        icon: "none",
      });
      return;
    }
    await UserInfoUpdate({ id_no: id_no.value });
    idNoShow.value = false;
    info.value.id_no = id_no.value;
    info.value.id_no_lock = true;
  }
};

const LogonFn = () => {
  uni.showModal({
    title: instance?.$t('info.logoutConfirmation'),
    content: instance?.$t('info.logoutConfirmation'),
    confirmText: instance?.$t('info.confirm'),
    cancelText: instance?.$t('info.cancel'),
    success: async (r) => {
      if (r.confirm) {
        LogOut();
        instance?.goTo("/pages/notLoggedIn/index");
      }
    },
  });
};
</script>

<style scoped lang="scss">
@import "../../static/scss/setUp.scss";
</style>